<template>
    <div class="listers">
        <div class="tap-had">
            <div class="haderd">
                <span class="el-icon-document">筛选查询</span>
                <el-button class="top-btn" @click="QueryResuilts">查询结果</el-button>
            </div>
        </div>
        <div class="bottmer">
            <el-form :inline="true" :model="formInline" class="demo-form-inline shuru">
                <el-form-item>
                    <span>操作人员：</span>
                    <el-select v-model="formInline.sale" placeholder="请选择">
                        <el-option v-for="item in selected" :key="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <span class="demonstration">操作日期:</span>
                    <el-date-picker v-model="formInline.time" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </div>


        <div class="dindanlist">
            <div class="list-nav">
                <span class="el-icon-s-operation">数据列表</span>
                <div class="rightlist">
                    <span>清除日志：</span>
                    <el-select v-model="ElOption" placeholder="选择清除日期">
                        <el-option v-for="item in Options" :key="item" :value="item">
                        </el-option>
                    </el-select>
                    <el-button class="list-btn2" @click="DelJural">刪除</el-button>
                </div>
            </div>
            <div class="list-top">
                <div class="list-content">
                    <el-table ref="multipleTable" :data="JouralList" border tooltip-effect="dark" style="width: 100%">
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column prop="id" label="编号" width="150">
                        </el-table-column>
                        <el-table-column prop="username" label="操作者" width="200">
                        </el-table-column>
                        <el-table-column prop="dateline" label="操作日期" width="200">
                        </el-table-column>
                        <el-table-column prop="ipAddress" label="IP地址" width="200">
                        </el-table-column>
                        <el-table-column prop="record" label="操作记录">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="list-foot">
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currpage" :page-size="pageSize" layout="prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>

</template>
<script>

import { JuralApi, QueryApi, DelJuralApi, PagingApi } from "@/http/xiaoShou/Jural.js";
export default {
    data() {
        return {
            JouralList: [],

            pageSize: 10,
            total: 0,
            formInline: {},
            multipleSelection: [],
            Options: [],
            ElOption: '',
            selected: [],
            currpage: 1

        }
    },
    created() {
        console.log(121212)
        this.getInit(this.currpage);

    },
    methods: {
        //数据查询获取
        async getInit(offset) {
            console.log(666)
            JuralApi()
                .then(res => {
                    this.total = res.data.data.length
                    for (var i = 0; i < res.data.data.length; i++) {
                        this.Options.push(res.data.data[i].dateline)
                        this.selected.push(res.data.data[i].username)
                    }

                    this.selected = [...new Set(this.selected)]
                    this.Options = [...new Set(this.Options)]

                })
                .catch(err => {
                    console.log('获取列表失败：', err);
                });

            let data = await PagingApi(offset)
            this.JouralList = data.data.data
        },
        //日期查询
        QueryResuilts() {
            QueryApi(this.formInline.time, this.formInline.sale)
                .then(res => {
                    console.log(res)
                    this.JouralList = res.data.data
                    // this.getInit(this.currpage); 
                    //   this.query = true
                })
                .catch(err => {
                    console.log('获取列表失败：', err);
                });
        },
        //删除
        DelJural() {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "error",
            })
                .then((res) => {
                    console.log(res)
                    DelJuralApi(this.ElOption)
                        .then((res) => {
                            console.log(res);
                            // this.getInit(this.currpage);
                        })
                    //删除提示
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getInit(this.currpage);
                })
                .catch((err) => {
                    console.log(err);
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    })
                })
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.getInit(val)
        }
    },



}


</script>
<style lang="scss" scoped>
.listers {
    padding: 0px;

    .tap-had {
        border: 1px solid rgb(228, 228, 228);
        height: 48px;
        background-color: rgba(243, 243, 243);
        line-height: 48px;
        padding: 0 5%;

        .top-btn {
            float: right;
            margin-top: 4px;
        }

        .jine {
            color: red;
            padding-left: 30px;
        }
    }

    .bottmer {
        border: 1px solid rgb(228, 228, 228);
        height: 48px;
        line-height: 48px;

        .shuru {
            padding-left: 40px;
            padding-top: 4px;
        }

    }

    .dindanlist {
        background-color: rgba(243, 243, 243);
        border: 1px solid rgb(228, 228, 228);
        line-height: 50px;
        margin-top: 20px;

        .list-nav {
            padding: 0 20px;

            span {
                color: #666;
            }

            .list-btn1,
            .list-btn2 {
                float: right;
                margin-top: 5px;
            }

            .rightlist {
                float: right;
            }
        }
    }

    .list-foot {
        border: 1px solid rgb(228, 228, 228);
        height: 48px;
        background-color: rgba(243, 243, 243);
        line-height: 48px;

        .block {
            float: right;
        }
    }
}
</style>